<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip test</title>

<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<!-- <script type="text/javascript" src="gs-tooltip.js"></script> -->
<link type="text/css" href="gs-tooltip.css" rel="stylesheet" />

<script type="text/javascript">
$(function()  
		{  
		var hideDelay = 500;    
		var currentID;  
		var hideTimer = null;  
		 
		// One instance that's reused to show info for the current person  
		var container = $('<div id="gs-tooltipContainer">'  
		     + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="gs-tooltip">'  
		      + '<tr>'  
		       + '   <td class="corner topLeft"></td>'  
		       + '   <td class="top"></td>'  
		      + '   <td class="corner topRight"></td>'  
		       + '</tr>'  
		      + '<tr>'  
		      + '   <td class="left">&nbsp;</td>'  
		      + '   <td><div id="gs-tooltipContent"></div></td>'  
		      + '   <td class="right">&nbsp;</td>'  
		       + '</tr>'  
		      + '<tr>'  
		     + '   <td class="corner bottomLeft">&nbsp;</td>'  
		      + '   <td class="bottom">&nbsp;</td>'  
		       + '   <td class="corner bottomRight"></td>'  
		       + '</tr>'  
		      + '</table>'  
		       + '</div>');  
		  
		   $('body').append(container);  
		  
		   $('.gs-tooltip').live('mouseover', function()  
		   {  
		       // format of 'rel' tag: pageid,personguid  
		       var settings = $(this).attr('rel').split(',');  
		       var pageID = settings[0];  
		       currentID = settings[1];  
		   	
		  			// url from tag href
		  			var url = $(this).attr('href');
		  
		      // If no guid in url rel tag, don't popup blank  
		      if (currentID == '')  
		           return;  
		  
		       if (hideTimer)  
		           clearTimeout(hideTimer);  
		  
		       var pos = $(this).offset();  
		      var width = $(this).width();  
		       container.css({  
		          left: (pos.left + width) + 'px',  
		           top: pos.top - 5 + 'px'  
		       });  
		   
		       $('#gs-tooltipContent').html('&nbsp;');  
		   
		      $.ajax({  
		           type: 'GET',  
		           url: 'http://koios/db/weapon.php',  
		          data: '&id=' + currentID,  
		           success: function(data)  
		           {  
		               // Verify that we're pointed to a page that returned the expected results.  
		               if (data.indexOf('gs-tooltipResult') < 0)  
		               {  
		                  $('#gs-tooltipContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.  
		 Please have your administrator check the error log.</span>');  
		              }  
		   
		               // Verify requested person is this person since we could have multiple ajax  
		               // requests out if the server is taking a while.  
		              if (data.indexOf(currentID) > 0)  
		               {                    
		                   var text = $(data).find('.gs-tooltipResult').html();  
		                   $('#gs-tooltipContent').html(text);  
		               }  
		           }  
		       });  
		   
		       container.css('display', 'block');  
		   });  
		   
		   $('.gs-tooltip').live('mouseout', function()  
		   {  
		       if (hideTimer)  
		           clearTimeout(hideTimer);  
		       hideTimer = setTimeout(function()  
		      {  
		           container.css('display', 'none');  
		       }, hideDelay);  
		   });  
		  
		  // Allow mouse over of details without hiding details  
		   $('.gs-tooltip').mouseover(function()  
		   {  
		       if (hideTimer)  
		          clearTimeout(hideTimer);  
		  			document.write("mouseover()");
		   });  
		   
		  // Hide after mouseout  
		   $('#gs-tooltipContainer').mouseout(function()  
		   {  
		      if (hideTimer)  
		           clearTimeout(hideTimer);  
		       hideTimer = setTimeout(function()  
		      {  
		           container.css('display', 'none');  
		       }, hideDelay);  
		   });  
		 });  

</script>




</head>
<body >

Here are some examples of tooltips.

Weapon tooltip<br/>
<a class="gs-tooltip" href="http://koios/db/weapon.php?id=4&render=tooltip" rel="1,4">H&K MP5A3</a><br/>

Item tooltip<br/>
<a class="gs-tooltip" href="http://koios/db/item.php?id=1&render=tooltip" rel="1,4">First Aid Kit mk I</a><br/>

Power tooltip<br/>
<a class="gs-tooltip" href="http://koios/db/power.php?id=1&render=tooltip&type=feat" rel="1,4">Armor Basics</a><br/>

</body>
</html>